<script lang="ts" setup name="AsmePersonExamContent">
import {
  getListByConditionsWithPage,
  updateOne,
  urls,
  useAsmePersonExamContentStore
} from '@/index';
import type {
  AsmePersonExamContent,
  AsmePersonExamContentQueryCondition,
  DialogModel
} from '@/index.d';
import { useRequest } from 'vue-request';
import DetailDialog from './DetailDialog.vue';
import { storeToRefs } from 'pinia';

const asmePersonExamContentStore = useAsmePersonExamContentStore();

const { defaultExpandAll } = storeToRefs(asmePersonExamContentStore);
const { changeDefaultExpandAll } = asmePersonExamContentStore;

const title = '美标试卷设计';

const queryCondition = reactive<AsmePersonExamContentQueryCondition>({
  deleted: false,
  change: false,
  currentPage: 1,
  pageSize: 20
});

const resetQueryCondition = () => {
  queryCondition.currentPage = 1;
  queryCondition.pageSize = 20;
  delete queryCondition.method;
  delete queryCondition.level;
  delete queryCondition.examKind;
};

const getAsmePersonExamContentListWithPagePromise = () => {
  return getListByConditionsWithPage<AsmePersonExamContent>(
    urls.asmePersonExamContent,
    queryCondition
  );
};

const {
  data: getAsmePersonExamContentListData,
  run: getAsmePersonExamContentListRun,
  loading: getAsmePersonExamContentListLoading
} = useRequest(getAsmePersonExamContentListWithPagePromise);

const handleResetQuery = () => {
  resetQueryCondition();
  getAsmePersonExamContentListRun();
};

const detailDialogModel = reactive<DialogModel<AsmePersonExamContent>>({
  visible: false,
  title,
  type: 'view',
  id: 0,
  change: false
});

watch(
  () => detailDialogModel.visible,
  (value: boolean) => {
    if (!value && detailDialogModel.change) {
      getAsmePersonExamContentListRun();
      detailDialogModel.change = false;
    }
  }
);
const handleChange = async (row: AsmePersonExamContent) => {
  const temData: AsmePersonExamContent = {
    id: row.id,
    sequence: row.sequence,
    method: row.method,
    level: row.level,
    examKind: row.examKind,
    subject: row.subject,
    optionA: row.optionA,
    optionB: row.optionB,
    optionC: row.optionC,
    optionD: row.optionD,
    answer: row.answer
  };
  await updateOne<AsmePersonExamContent>(urls.asmePersonExamContent, temData);
  getAsmePersonExamContentListRun();
};

const handleChangeDefaultExpandAll = () => {
  changeDefaultExpandAll();
  getAsmePersonExamContentListRun();
};
</script>
<template>
  <HqContainerTable
    :base-url="urls.asmePersonExamContent"
    :title="title"
    :loading="getAsmePersonExamContentListLoading"
    :total="getAsmePersonExamContentListData?.total"
    :table-data="getAsmePersonExamContentListData?.records"
    v-model:pageSize="queryCondition.pageSize"
    v-model:current-page="queryCondition.currentPage"
    @handle-query="getAsmePersonExamContentListRun"
    @handle-reset-query="handleResetQuery"
    v-model:detail-dialog-model="detailDialogModel"
    :operate-column="true"
  >
    <template #search>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.method"
          clearable
          placeholder="请选择方法"
          @change="getAsmePersonExamContentListRun"
        >
          <HqNdeMethodOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.level"
          clearable
          placeholder="请选择等级"
          @change="getAsmePersonExamContentListRun"
        >
          <HqNdeMethodLevelOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.examKind"
          clearable
          placeholder="请选择试卷类型"
          @change="getAsmePersonExamContentListRun"
        >
          <el-option value="General" label="General" />
          <el-option value="Basic" label="Basic" />
          <el-option value="Method" label="Method" />
          <el-option value="Specific" label="Specific" />
        </el-select>
      </hq-col>
    </template>
    <template #button>
      <el-button type="primary" @click="handleChangeDefaultExpandAll">
        <span v-if="defaultExpandAll">折叠答案</span>
        <span v-else>展开答案</span>
      </el-button>
    </template>
    <template #table>
      <HqTable
        :title
        :base-url="urls.asmePersonExamContent"
        :table-data="getAsmePersonExamContentListData?.records"
        :loading="getAsmePersonExamContentListLoading"
        :default-expand-all="defaultExpandAll"
      >
        <template #columns>
          <hq-table-column type="expand" label="详情" :min-width="67">
            <template #default="{ row }">
              <div class="column-extent-container">
                <div class="column-extent">
                  <span>题干：</span>
                  <span>
                    <el-input
                      type="textarea"
                      :autosize="{ minRows: 2 }"
                      resize="none"
                      v-model="row.subject"
                      @change="handleChange(row)"
                    ></el-input>
                  </span>
                </div>
                <div class="column-extent">
                  <span>A：</span>
                  <span>
                    <el-input v-model="row.optionA" @change="handleChange(row)"></el-input>
                  </span>
                </div>
                <div class="column-extent">
                  <span>B：</span>
                  <span>
                    <el-input v-model="row.optionB" @change="handleChange(row)"></el-input>
                  </span>
                </div>
                <div class="column-extent">
                  <span>C：</span>
                  <span>
                    <el-input v-model="row.optionC" @change="handleChange(row)"></el-input>
                  </span>
                </div>
                <div class="column-extent">
                  <span>D：</span>
                  <span>
                    <el-input v-model="row.optionD" @change="handleChange(row)"></el-input>
                  </span>
                </div>
              </div>
            </template>
          </hq-table-column>
          <hq-table-column label="序号" :min-width="100">
            <template #default="{ row }">
              <el-input-number
                v-model="row.sequence"
                @change="handleChange(row)"
                :min="1"
                :max="50"
              />
            </template>
          </hq-table-column>
          <hq-table-column
            prop="subject"
            label="题目"
            :min-width="500"
            show-overflow-tooltip
            align="left"
          />
          <hq-table-column label="答案" :min-width="100">
            <template #default="{ row }">
              <el-radio-group v-model="row.answer" @change="handleChange(row)">
                <el-radio-button label="A" value="A" />
                <el-radio-button label="B" value="B" />
                <el-radio-button label="C" value="C" />
                <el-radio-button label="D" value="D" />
              </el-radio-group>
            </template>
          </hq-table-column>
          <hq-table-column label="方法" :min-width="100">
            <template #default="{ row }">
              <el-select v-model="row.method" @change="handleChange(row)" disabled>
                <HqNdeMethodOptions />
              </el-select>
            </template>
          </hq-table-column>
          <hq-table-column label="等级" :min-width="100">
            <template #default="{ row }">
              <el-select v-model="row.level" @change="handleChange(row)" disabled>
                <HqNdeMethodLevelOptions />
              </el-select>
            </template>
          </hq-table-column>
          <hq-table-column label="试卷种类" :min-width="100">
            <template #default="{ row }">
              <el-select v-model="row.examKind" @change="handleChange(row)" disabled>
                <el-option
                  v-if="row.level === 1 || row.level === 2"
                  value="General"
                  label="General"
                />
                <el-option v-if="row.level === 3" value="Basic" label="Basic" />
                <el-option v-if="row.level === 3" value="Method" label="Method" />
                <el-option value="Specific" label="Specific" />
              </el-select>
            </template>
          </hq-table-column>
        </template>
      </HqTable>
    </template>
  </HqContainerTable>
  <DetailDialog v-model:dialog-model="detailDialogModel" v-if="detailDialogModel.visible" />
</template>
<style lang="scss" scoped>
.column-extent-container {
  .column-extent {
    display: flex;
    margin: 5px 0;
    align-items: center;
    > span:first-child {
      flex: 1;
      text-align: right;
    }
    > span:last-child {
      flex: 15;
    }
  }

  .column-extent:first-child {
    align-items: start;
  }
}
</style>
